<!--
 * @Author: chunlai
 * @Date: 2024-08-15 15:42:03
 * @LastEditTime: 2025-09-10 17:43:43
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\views\form\components\MultiAssuredItem.vue
 * @Description: 多被保人-对象
-->

<template>
  <div
    class="newModel"
    :class="bbrListNum == 1 && !disEditFields ? 'first_margin' : ''"
  >
    <!-- 用户类型 holderType-->
    <div class="topSec">
      <div>
        <div
          class="flex_ac ftw5 ft14"
          style="line-height: 20px"
          v-if="bbrListNum > 1"
        >
          被保人{{
            `${pindex + 1}${pindex === 0 && isNetInsure != "3" ? "(主)" : ""}`
          }}
          <span
            :class="enfold ? 'ms-row2-icon' : 'ms-row-icon'"
            style="margin-left: 8px"
            @click="enfold = !enfold"
            v-if="userInfo.relationToAppnt !== '4'"
          ></span>
        </div>
      </div>
      <div class="flex_ac" v-if="!disEditFields">
        <!-- <MsImgIcon
          name="abook_g"
          class="ml20"
          @click.native="openDirectory()"
          v-if="customerInfos === '1'"
        />
        <MsImgIcon name="photo" class="ml20" @click.native="showSheet = true" /> -->
        <MsImgIcon
          name="delete"
          class="ml20"
          @click.native="delUserItem"
          v-if="bbrListNum > 1"
        />
      </div>
    </div>
    <!-- v-if="pindex == 0" -->
    <div :key="`bbr${pindex}mode1`">
      <van-field
        label="同投保人（本人）"
        label-width="120"
        :input-align="inputAlign"
        :class="{ disEditModel: disEditFields }"
      >
        <div slot="input">
          <MsRadios
            :curVal="userInfo.relationToAppnt == '4' ? '1' : '0'"
            :arrList="yesNoCheckList"
            type="sameTbr"
            @change="changeSameTbr"
          />
        </div>
      </van-field>
      <van-field
        label="是主被保人的"
        :key="`bbr${pindex}mode4`"
        class="border-line"
        :class="`bbr${pindex}_relationToMain`"
        :input-align="inputAlign"
        @click="
          showPopAction(
            'picker',
            'relationToMain',
            relaToMainBbr,
            userInfo.relationToMain
          );
          tipsInfo.relationToMain = '';
        "
        :value="userInfo.relationToMainName"
        readonly
        placeholder="请选择"
        :error="tipsInfo.relationToMain !== ''"
        v-if="infoReg.hasOwnProperty('relationToMain') && pindex > 0"
      >
        <span
          class="ms-row-icon"
          slot="right-icon"
          v-if="relaToMainBbr.length > 1"
        ></span>
      </van-field>

      <van-field
        label="是投保人的"
        class="border-line"
        :class="`bbr${pindex}_relationToAppnt`"
        :input-align="inputAlign"
        @click="
          showPopAction(
            'picker',
            'relationToAppnt',
            bbrRelaToTbr,
            userInfo.relationToAppnt
          );
          tipsInfo.relationToAppnt = '';
        "
        :value="userInfo.relationToAppntName"
        readonly
        placeholder="请选择"
        :key="`bbr${pindex}mode2`"
        :error="tipsInfo.relationToAppnt !== ''"
        v-if="userInfo.relationToAppnt != '4'"
      >
        <span
          class="ms-row-icon"
          slot="right-icon"
          v-if="bbrRelaToTbr.length > 1"
        ></span>
      </van-field>
      <div class="enfold-line" :key="`bbr${pindex}mode3`" v-show="enfold">
        <van-field
          label="姓名"
          :class="[`bbr${pindex}_name`, disEditFields ? 'disEditModel' : '']"
          v-model="userInfo.name"
          :input-align="inputAlign"
          clearable
          placeholder="请输入"
          @input="tipsInfo.name = ''"
          @blur="validInfo('name')"
          :error="tipsInfo.name !== ''"
        >
          <MsImgIcon
            name="abook_g"
            size="24"
            slot="button"
            @click.native="openDirectory()"
            v-if="customerInfos === '1'"
          />
        </van-field>
        <van-field
          label="证件类型"
          :input-align="inputAlign"
          :class="[`bbr${pindex}_idType`, disEditFields ? 'disEditModel' : '']"
          @click="
            !disEditFields &&
              showPopAction('picker', 'idType', idTypeList, userInfo.idType)
          "
          @focus="tipsInfo.idType = ''"
          :value="userInfo.idName"
          readonly
          placeholder="请选择"
          :error="tipsInfo.idType !== ''"
          v-if="infoReg.hasOwnProperty('idType')"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="!disEditFields && idTypeList.length > 1"
          ></span>
        </van-field>
        <van-field
          label="证件号码"
          :class="[`bbr${pindex}_idNum`, disEditFields ? 'disEditModel' : '']"
          :input-align="inputAlign"
          v-model="cpCompute"
          clearable
          placeholder="请输入"
          :error="tipsInfo.idNum !== ''"
          @click="tipsInfo.idNum = ''"
          @focus="foI = true"
          @blur="
            foI = false;
            validInfo('idNum');
          "
        >
          <MsImgIcon
            name="camera_g"
            size="24"
            slot="button"
            @click.native="showSheet = true"
          />
        </van-field>
        <van-field
          label="性别"
          :input-align="inputAlign"
          :class="[`bbr${pindex}_sex`, disEditFields ? 'disEditModel' : '']"
        >
          <div slot="input">
            <span class="btn_text thin-border" v-if="disabledSex">
              {{ userInfo.sex == "1" ? "女" : "男" }}
            </span>
            <MsRadios
              v-else
              :curVal="userInfo.sex"
              :arrList="sexList"
              type="sex"
              @change="changeMsRadio"
            />
          </div>
        </van-field>
        <van-field
          label="出生日期"
          placeholder="请选择"
          :input-align="inputAlign"
          :class="[
            `bbr${pindex}_birthDate`,
            disEditFields ? 'disEditModel' : '',
          ]"
          @click-input="showPopAction('date', 'birthDate', [])"
          readonly
        >
          <div class="age-box" slot="input">
            <span v-if="userInfo.birthDate"
              >{{ userInfo.birthDate }} ( {{ ageVal }}周岁 )
            </span>
            <span v-else style="color: #999">请选择</span>
          </div>
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="!disabledSex"
          ></span>
        </van-field>
        <van-field
          v-if="infoReg.hasOwnProperty('validDateEnd') && showLonger"
          :class="`set_flex1 bbr${pindex}_sex`"
          :input-align="inputAlign"
        >
          <div slot="label" class="userSelect">
            <span>证件有效期</span>
            <FieldDescMode field="validDateEnd" />
          </div>
          <div slot="input">
            <MsRadios
              :curVal="longTime == userInfo.validDateEnd"
              :arrList="dateEndList"
              type="validDateEnd"
              @change="changeMsRadio"
            />
          </div>
        </van-field>
        <van-field
          label="有效期起期"
          :input-align="inputAlign"
          :class="`bbr${pindex}_validDate`"
          v-if="infoReg.hasOwnProperty('validDate')"
          @click="showPopAction('date', 'validDate', [])"
          @focus="tipsInfo.validDate = ''"
          :value="userInfo.validDate"
          readonly
          placeholder="请选择"
          :error="tipsInfo.validDate !== ''"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="!validDateStartDisabled"
          ></span>
        </van-field>
        <van-field
          label="有效期止期"
          :input-align="inputAlign"
          :class="`bbr${pindex}_validDateEnd`"
          v-if="
            infoReg.hasOwnProperty('validDateEnd') &&
            (longTime !== userInfo.validDateEnd || !showLonger)
          "
          @click-input="showPopAction('date', 'validDateEnd', [])"
          :value="
            userInfo.validDateEnd == longTime ? '长期' : userInfo.validDateEnd
          "
          readonly
          placeholder="请选择"
          @focus="tipsInfo.validDateEnd = ''"
          :error="tipsInfo.validDateEnd !== ''"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="!validDateDisabled"
          ></span>
        </van-field>
        <!-- 现居地址 -->
        <van-field
          :input-align="inputAlign"
          :class="`bbr${pindex}_areaName`"
          v-if="infoReg.hasOwnProperty('areaName')"
          @click="showPopAction('address', 'areaName', [])"
          :value="userInfo.areaName"
          label="现居地址"
          type="textarea"
          rows="1"
          autosize
          readonly
          placeholder="请选择"
          label-width="130px"
          @focus="tipsInfo.areaName = ''"
          :error="tipsInfo.areaName !== ''"
        >
          <div slot="label" class="flexlabel">
            <span class="mr5">现居地址</span>
            <div
              class="same_to_btn"
              :class="isSameWithAppnt ? 'is_same_res' : ''"
              @click.stop="
                tipsInfo.areaName = '';
                sameToAppnt($event, 'areaName');
              "
            >
              同投保人
            </div>
          </div>
          <span class="ms-row-icon" slot="right-icon"></span>
        </van-field>
        <van-field
          :input-align="inputAlign"
          :class="`bbr${pindex}_permanentAddress`"
          v-if="infoReg.hasOwnProperty('permanentAddress')"
          v-model="userInfo.permanentAddress"
          label="详细地址"
          type="textarea"
          rows="1"
          maxlength="30"
          autosize
          clearable
          :placeholder="`必须包含:${detailAddrRule}`"
          @input="tipsInfo.permanentAddress = ''"
          @blur="validInfo('permanentAddress')"
          :error="tipsInfo.permanentAddress !== ''"
        />
        <van-field
          :class="`bbr${pindex}_phone`"
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('phone')"
          v-model="userInfo.phone"
          label="手机号码"
          type="number"
          :maxlength="foI2 ? '11' : '13'"
          clearable
          placeholder="请输入"
          @focus="
            foI2 = true;
            tipsInfo.phone = '';
          "
          @blur="
            foI2 = false;
            checkSmsCodeStauts();
          "
          :error="tipsInfo.phone !== ''"
          label-width="170px"
        >
          <div slot="label" class="flexlabel">
            <span class="mr5">手机号码</span>
            <div
              class="same_to_btn"
              :class="phoneSameWithAppnt ? 'is_same_res' : ''"
              @click.stop="
                tipsInfo.phone = '';
                sameToAppnt($event, 'phone');
              "
            >
              同投保人
            </div>
          </div>
        </van-field>
        <van-field
          class="phone_code_md"
          :input-align="inputAlign"
          v-model="userInfo.validCode"
          label="短信验证码"
          type="number"
          maxlength="6"
          clearable
          placeholder="请输入"
          @blur="checkSmsCodeStauts()"
          v-if="needSmsCheck"
        >
          <SmsCodeBtn
            slot="button"
            ref="smsCodeRef"
            :phoneNum="userInfo.phone"
          />
        </van-field>
        <van-field
          label="职业名称"
          :input-align="inputAlign"
          :class="[
            `bbr${pindex}_occupationCode`,
            disEditFields ? 'disEditModel' : '',
          ]"
          :value="userInfo.occupationCodeName"
          v-if="infoReg.hasOwnProperty('occupationCode')"
          @click="
            showPopAction('job', 'occupationCode', []);
            tipsInfo.occupationCode = '';
          "
          type="textarea"
          rows="1"
          autosize
          readonly
          placeholder="请选择"
          :error="tipsInfo.occupationCode !== ''"
        >
          <span class="ms-row-icon" slot="right-icon"></span>
        </van-field>
        <van-field
          label="国籍"
          :input-align="inputAlign"
          :class="`bbr${pindex}_nationality`"
          v-if="infoReg.hasOwnProperty('nationality')"
          @click="
            tipsInfo.nationality = '';
            showPopAction(
              'picker',
              'nationality',
              nationList,
              userInfo.nationality
            );
          "
          :value="userInfo.nationalityName"
          readonly
          placeholder="请选择"
          :error="tipsInfo.nationality !== ''"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="nationList.length > 1"
          ></span>
        </van-field>
        <van-field
          label="工作单位"
          :input-align="inputAlign"
          :class="`bbr${pindex}_grpName`"
          v-if="infoReg.hasOwnProperty('grpName')"
          v-model="userInfo.grpName"
          type="textarea"
          maxlength="30"
          rows="1"
          autosize
          clearable
          placeholder="职业为学生,请输入在读学校"
          @input="tipsInfo.grpName = ''"
          :error="tipsInfo.grpName !== ''"
        />
        <van-field
          label="工作内容"
          :input-align="inputAlign"
          :class="`bbr${pindex}_jobContent`"
          v-if="infoReg.hasOwnProperty('jobContent')"
          v-model="userInfo.jobContent"
          type="textarea"
          maxlength="30"
          rows="1"
          autosize
          clearable
          placeholder="请输入"
          @focus="tipsInfo.jobContent = ''"
          :error="tipsInfo.jobContent !== ''"
        />
        <!-- 兼职 -->
        <van-field
          label="兼职"
          :input-align="inputAlign"
          :class="`bbr${pindex}_partTimeJob`"
          v-if="infoReg.hasOwnProperty('partTimeJob')"
          v-model="userInfo.partTimeJob"
          type="textarea"
          maxlength="30"
          rows="1"
          autosize
          clearable
          placeholder="请输入"
          @input="tipsInfo.partTimeJob = ''"
          :error="tipsInfo.partTimeJob !== ''"
        />
        <!-- 年收入 -->
        <van-field
          label="年收入"
          :class="`bbr${pindex}_income`"
          v-if="infoReg.hasOwnProperty('income')"
          :value="userInfo.income"
          type="number"
          :input-align="inputAlign"
          placeholder="请输入"
          @input="(e) => (userInfo.income = money(e))"
          @focus="tipsInfo.income = ''"
          @blur="testIncom"
          :error="tipsInfo.income !== ''"
        >
          <template #button>
            <span class="field_unit">万元</span>
          </template>
        </van-field>
        <!-- 身高 体重-->
        <van-field
          :class="`bbr${pindex}_height`"
          v-model="userInfo.height"
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('height')"
          maxlength="3"
          :formatter="formatter"
          clearable
          label="身高（CM）"
          type="digit"
          placeholder="请输入"
          @focus="tipsInfo.height = ''"
          :error="tipsInfo.height !== ''"
          @blur="testBMI('height')"
        >
          <template #button>
            <span class="field_unit">厘米</span>
          </template>
        </van-field>
        <van-field
          v-model="userInfo.weight"
          v-if="infoReg.hasOwnProperty('weight')"
          label="体重（KG）"
          maxlength="3"
          clearable
          :input-align="inputAlign"
          type="number"
          placeholder="请输入"
          @focus="tipsInfo.weight = ''"
          :formatter="formatter"
          @blur="testBMI('weight')"
          :error="tipsInfo.weight !== ''"
        >
          <template #button>
            <span class="field_unit">公斤</span>
          </template>
        </van-field>

        <van-field
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('nationCode')"
          :value="userInfo.nationName"
          label="民族"
          @click="showPopAction('picker', 'nationCode', [])"
          readonly
          placeholder="请选择"
        >
          <span class="ms-row-icon" slot="right-icon"></span>
        </van-field>

        <van-field
          :input-align="inputAlign"
          :class="`bbr${pindex}_rgtAreaName`"
          v-if="infoReg.hasOwnProperty('rgtAreaName')"
          @click="
            tipsInfo.rgtAreaName = '';
            showPopAction('address', 'rgtName', []);
          "
          :value="userInfo.rgtAreaName"
          label="户籍"
          type="textarea"
          rows="1"
          autosize
          readonly
          placeholder="请选择"
          :error="tipsInfo.rgtAreaName !== ''"
        >
          <span class="ms-row-icon" slot="right-icon"></span>
        </van-field>
        <van-field
          :input-align="inputAlign"
          :class="`bbr${pindex}_zipCode`"
          v-if="infoReg.hasOwnProperty('zipCode')"
          @focus="tipsInfo.zipCode = ''"
          v-model="userInfo.zipCode"
          label="邮政编码"
          type="number"
          maxlength="6"
          clearable
          placeholder="请输入"
          :error="tipsInfo.zipCode !== ''"
        />
        <template v-if="infoReg.hasOwnProperty('postalAreaName')">
          <van-field
            :input-align="inputAlign"
            :class="`bbr${pindex}_postalAreaName`"
            @click-input="showPopAction('address', 'postalAreaName', [])"
            :value="userInfo.postalAreaName"
            type="textarea"
            rows="1"
            autosize
            readonly
            label-width="130px"
            placeholder="请选择"
            @focus="tipsInfo.postalAreaName = ''"
            :error="tipsInfo.postalAreaName !== ''"
          >
            <div slot="label" class="flexlabel">
              <div class="mr5">通讯地址</div>
              <div
                class="same_to_btn"
                :class="postSameHome ? 'is_same_res' : ''"
                @click.stop="
                  tipsInfo.postalAreaName = '';
                  setPostalToJuZhu(postSameHome == 1 ? '' : 1);
                "
                v-if="infoReg.hasOwnProperty('areaName')"
              >
                同居住地
              </div>
              <div
                class="same_to_btn"
                :class="isSameWithAppntPostalArea ? 'is_same_res' : ''"
                @click.stop="
                  tipsInfo.postalAreaName = '';
                  sameToAppnt($event, 'postalAreaName');
                "
                v-else
              >
                同投保人
              </div>
            </div>
            <span class="ms-row-icon" slot="right-icon"></span>
          </van-field>
        </template>
        <van-field
          :input-align="inputAlign"
          :class="`bbr${pindex}_postalPermanentAddress`"
          v-if="infoReg.hasOwnProperty('postalPermanentAddress')"
          v-model="userInfo.postalPermanentAddress"
          label="详细地址"
          :readonly="postSameHome == 1"
          type="textarea"
          rows="1"
          maxlength="30"
          autosize
          clearable
          :placeholder="`必须包含:${detailAddrRule}`"
        />
        <van-field
          v-if="infoReg.hasOwnProperty('postalZipCode')"
          v-model="userInfo.postalZipCode"
          label="邮政编码"
          :readonly="postSameHome == 1"
          type="number"
          maxlength="6"
          clearable
          placeholder="请输入"
        />
        <template v-if="infoReg.hasOwnProperty('homeAreaName')">
          <van-field
            :input-align="inputAlign"
            :class="`bbr${pindex}_homeAreaName`"
            @click-input="showPopAction('address', 'homeAreaName', [])"
            :value="userInfo.homeAreaName"
            type="textarea"
            rows="1"
            autosize
            readonly
            label-width="130px"
            placeholder="请选择"
            @focus="tipsInfo.homeAreaName = ''"
            :error="tipsInfo.homeAreaName !== ''"
          >
            <div slot="label" class="flexlabel">
              <div class="mr5">家庭地址</div>
              <div
                class="same_to_btn"
                :class="homeSamePostal ? 'is_same_res' : ''"
                @click.stop="
                  tipsInfo.homeAreaName = '';
                  setHomeToPostal(homeSamePostal == 1 ? '' : 1);
                "
                v-if="infoReg.hasOwnProperty('postalAreaName')"
              >
                同通讯地
              </div>
            </div>
            <span class="ms-row-icon" slot="right-icon"></span>
          </van-field>
        </template>
        <van-field
          :input-align="inputAlign"
          :class="`bbr${pindex}_homePermanentAddress`"
          v-if="infoReg.hasOwnProperty('homePermanentAddress')"
          v-model="userInfo.homePermanentAddress"
          label="详细地址"
          :readonly="homeSamePostal == 1"
          type="textarea"
          rows="1"
          maxlength="30"
          autosize
          clearable
          :placeholder="`必须包含:${detailAddrRule}`"
        />
        <div class="van-cell extro" v-if="infoReg.hasOwnProperty('email')">
          <van-field
            :input-align="inputAlign"
            :class="`bbr${pindex}_email`"
            v-model="userInfo.email"
            @input="showEmailAppend = true"
            @blur="hideAppend"
            @focus="
              tipsInfo.email = '';
              showEmailAppend = true;
            "
            label="邮箱"
            type="email"
            clearable
            placeholder="请输入"
            label-width="170px"
            :error="tipsInfo.email !== ''"
          >
            <div slot="label" class="flexlabel">
              <span class="mr5">邮箱</span>
              <div
                class="same_to_btn"
                :class="isSameWithAppntForEmail ? 'is_same_res' : ''"
                @click.stop="
                  tipsInfo.email = '';
                  sameToAppnt($event, 'email');
                "
              >
                同投保人
              </div>
            </div>
          </van-field>
          <div class="hintBox" v-if="emails.length > 0 && showEmailAppend">
            <div
              @click="userInfo.email = mail"
              class="hintItem"
              v-for="mail in emails"
              :key="mail"
            >
              {{ mail }}
            </div>
          </div>
        </div>
        <van-field
          label="学历"
          :class="`bbr${pindex}_degree`"
          :input-align="inputAlign"
          @click="
            showPopAction('picker', 'degree', degreeList, userInfo.degree)
          "
          :value="userInfo.degreeName"
          readonly
          placeholder="请选择"
          @focus="tipsInfo.degree = ''"
          :error="tipsInfo.degree !== ''"
          v-if="infoReg.hasOwnProperty('degree')"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="degreeList.length > 1"
          ></span>
        </van-field>
        <van-field
          :class="`bbr${pindex}_maritalStatus`"
          :input-align="inputAlign"
          @click="
            showPopAction(
              'picker',
              'maritalStatus',
              maritalStatusList,
              userInfo.maritalStatus
            )
          "
          :value="userInfo.maritalStatusName"
          label="婚姻状况"
          readonly
          placeholder="请选择"
          v-if="infoReg.hasOwnProperty('maritalStatus')"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="maritalStatusList.length > 1"
          ></span>
        </van-field>

        <van-field
          :input-align="inputAlign"
          v-if="infoReg.hasOwnProperty('residentType')"
          @click="showPopAction('picker', 'residentType', residentTypeList)"
          :value="userInfo.residentTypeName"
          label="居民类型"
          readonly
          placeholder="请选择"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="residentTypeList.length > 1"
          ></span>
        </van-field>

        <van-field
          :input-align="inputAlign"
          :class="[
            `bbr${pindex}_socialInsuFlag`,
            disEditFields ? 'disEditModel' : '',
          ]"
          label="是否有社保"
          readonly
          @focus="tipsInfo.socialInsuFlag = ''"
          :error="tipsInfo.socialInsuFlag !== ''"
          v-if="infoReg.hasOwnProperty('socialInsuFlag')"
        >
          <template #input>
            <MsRadios
              :curVal="userInfo.socialInsuFlag"
              :arrList="socialSecList"
              type="socialInsuFlag"
              @change="changeMsRadio"
            />
          </template>
        </van-field>
        <!-- 个人收入来源-->
        <van-field
          :input-align="inputAlign"
          :class="`bbr${pindex}_incomeSource`"
          label="收入来源"
          readonly
          @focus="tipsInfo.incomeSource = ''"
          :error="tipsInfo.incomeSource !== ''"
          v-if="infoReg.hasOwnProperty('incomeSource')"
        >
          <template #input>
            <IncomeSource
              v-model="userInfo.incomeSource"
              fieldKey="incomeSource"
              :arrList="IncSourceList"
              @clickEvent="changeData"
            >
            </IncomeSource>
          </template>
        </van-field>
        <van-field
          :class="`bbr${pindex}_otherCompanyCompIns`"
          :input-align="inputAlign"
          label-width="230px"
          label="是否有其他公司费用补偿型医疗险"
          readonly
          @focus="tipsInfo.otherCompanyCompIns = ''"
          :error="tipsInfo.otherCompanyCompIns !== ''"
          v-if="infoReg.hasOwnProperty('otherCompanyCompIns')"
        >
          <template #input>
            <MsRadios
              :curVal="userInfo.otherCompanyCompIns"
              :arrList="yesNoCheckList"
              type="otherCompanyCompIns"
              @change="changeMsRadio"
            />
          </template>
        </van-field>
        <van-field
          :input-align="inputAlign"
          :class="`bbr${pindex}_crsIdType`"
          v-if="infoReg.hasOwnProperty('crsIdType')"
          @click="openCrsIdType"
          :value="userInfo.crsIdTypeName"
          label="个税居民类型"
          readonly
          placeholder="请选择"
          @focus="tipsInfo.crsIdType = ''"
          :error="tipsInfo.crsIdType !== ''"
        >
          <span
            class="ms-row-icon"
            slot="right-icon"
            v-if="hasResidentFile || crsIdTypeList.length > 1"
          ></span>
        </van-field>
        <!-- 被保人18周岁以下 关系非子女需要 法定监护人信息 -->
        <template v-if="showJhr">
          <van-field
            :input-align="inputAlign"
            :class="`bbr${pindex}_guardianName`"
            v-model="userInfo.guardianName"
            label="法定监护人姓名"
            label-width="190px"
            maxlength="25"
            clearable
            placeholder="请输入"
          >
            <div slot="label" class="flexlabel">
              <span class="mr5">法定监护人姓名</span>
              <div
                class="same_to_btn"
                :class="jianhuIsAppnt ? 'is_same_res' : ''"
                @click.stop="sameToAppnt($event, 'guardianName')"
              >
                是投保人
              </div>
            </div>
          </van-field>
          <van-field
            :input-align="inputAlign"
            v-model="userInfo.guardianIdNo"
            label-width="130px"
            label="法定监护人身份证号"
            maxlength="18"
            clearable
            placeholder="请输入"
          />
          <van-field
            label="监护人是被保人的"
            label-width="130px"
            :class="`bbr${pindex}_guardianRelationToInsured`"
            :key="`bbr${pindex}guardianRelationToInsured`"
            :input-align="inputAlign"
            @click="
              showPopAction(
                'picker',
                'guardianRelationToInsured',
                bbrRelaToJhr,
                userInfo.guardianRelationToInsured
              );
              tipsInfo.guardianRelationToInsured = '';
            "
            :value="userInfo.guardianRelationToInsuredName"
            readonly
            placeholder="请选择"
            :error="tipsInfo.guardianRelationToInsured !== ''"
            v-if="infoReg.hasOwnProperty('guardianRelationToInsured')"
          >
            <span
              class="ms-row-icon"
              slot="right-icon"
              v-if="bbrRelaToJhr.length > 1"
            ></span>
          </van-field>
        </template>
      </div>
      <van-field
        label="健康问卷"
        :class="[
          `bbr${pindex}_healthyStatus`,
          disEditFields ? 'disEditModel' : '',
        ]"
        :input-align="inputAlign"
        readonly
        :error="tipsInfo.healthyStatus !== ''"
        v-if="infoReg.hasOwnProperty('healthyStatus')"
      >
        <div slot="input" @click="openHealthPop">
          <span v-if="userInfo.healthyStatus !== ''">
            {{ userInfo.healthyStatus == "1" ? "通过" : "不通过" }}
          </span>
          <span v-else style="color: #c0c4cc">请确认健康状况</span>
        </div>
        <span
          class="ms-row-icon"
          slot="right-icon"
          v-if="!disEditFields || noticeMode == '2'"
        ></span>
      </van-field>
    </div>
    <AssuredBenefit
      :ref="`benefit${pindex}Ref`"
      :key="`benefit${pindex}Ref`"
      :bindex="pindex"
      v-if="syrRefresh && syrMinNum > 0"
    ></AssuredBenefit>
    <van-popup v-model="showPop" round position="bottom">
      <van-picker
        v-if="popConfig.type == 'picker'"
        ref="picker"
        show-toolbar
        :columns="viewOptions"
        @confirm="onConfirmPick"
        @cancel="showPop = false"
        :default-index="defaultIndex"
      >
        <div slot="title" class="keyBox" v-if="popConfig.list.length > 8">
          <input
            type="text"
            class="keyInput"
            placeholder="请输入关键字查询"
            v-model="keyWord"
          />
        </div>
      </van-picker>
      <van-datetime-picker
        v-else-if="popConfig.type == 'date'"
        :value="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        type="date"
        @confirm="onConfirmDate"
        @cancel="showPop = false"
      />
      <OccupationPop
        v-else-if="popConfig.type == 'job'"
        utype="bbr"
        @cancel="showPop = false"
        @confirm="onConfirmDJob"
      />
      <Address
        v-else-if="popConfig.type == 'address'"
        @cancle="showPop = false"
        :filterCode="filterCode"
        @addresssConfirm="addresssConfirm"
      />
    </van-popup>
    <OcrRecoganizePop
      :showOcrPop="showSheet"
      ocrType="bbr"
      @sureBtn="sureOcrRes"
      v-if="showSheet"
    >
    </OcrRecoganizePop>
    <CustomerDirectory
      v-if="showUserList"
      :ref="`${userFlag}CustomerDirectory`"
      @confirm="sureUserSelect"
      @cancel="showUserList = false"
    />
    <van-popup v-model="showFile" round position="bottom" style="height: 80vh">
      <RevenueFile
        uType="bbr"
        v-if="revenueFileType == '1'"
        :fileInfo="userInfo.taxIdentInfo"
        :infoData="userInfo"
        @handleFile="handleFile"
      />
      <Revenue2File
        uType="tbr"
        v-else-if="revenueFileType == '2'"
        :fileInfo="userInfo.taxIdentInfo"
        :infoData="userInfo"
        @handleFile="handleFile"
      />
    </van-popup>
    <HealthyNotice ref="healthyRef" @sureClick="sureClick" v-if="noticePop" />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import SmsCodeBtn from "./SmsCodeBtn";
import RevenueFile from "./RevenueFile";
import Revenue2File from "./Revenue2File";
import FieldDescMode from "./FieldDescMode";
import IncomeSource from "./IncomeSource";
import AssuredBenefit from "./AssuredBenefit";
import HealthyNotice from "@/views/index/feecount/HealthyNotice";
import { validUserInfo } from "@/translate/validate/customer";
import { userRelateRisk } from "@/translate/validate/index";
import { userInfoMix } from "@/mixins/userInfo";
import { smsCodeMixin } from "@/mixins/smscode";
import { bbrAndSyrInfoMix } from "@/mixins/bbrsyr";
import { tbrBbrMixin } from "@/mixins/tbrbbr";
import { radioMixin } from "@/mixins/radios";
import { popupMixin } from "@/mixins/popup";

export default {
  name: "MultiAssuredItem",
  props: {
    pindex: {
      type: Number,
      default: () => 0,
    },
  },
  components: {
    SmsCodeBtn,
    RevenueFile,
    FieldDescMode,
    Revenue2File,
    IncomeSource,
    AssuredBenefit,
    HealthyNotice,
  },
  computed: {
    ...mapGetters({
      minorAge: "page/minorAge",
      bbrMaxNum: "page/bbrMaxNum",
      syrMinNum: "page/syrMinNum",
      noticeMode: "page/noticeMode",
      mainInsu: "risks/mainInsu",
      syrRefresh: "common/syrRefresh",
      bbrMultList: "insert/bbrMultList",
      provinceNo: "agent/saleProvinceNo",
      tbBirthStrMin: "infoReg/bbBirthMin",
      tbBirthStrMax: "infoReg/bbBirthMax",
      bbrToMainBbr: "dictionary/bbrToMainBbr",
      IncSourceList: "dictionary/IncSourceList",
      idTypeList: "dictionary/insuredIdTypeList",
      bbrWithJhrShip: "dictionary/bbrWithJhrShip",
      provinceFilter: "dictionary/provinceFilter",
      yesNoCheckList: "dictionary/yesNoCheckList",
      insuredRelationship: "dictionary/insuredRelationship",
    }),
    bbrRelaToTbr() {
      let res = [];
      if (this.insuredRelationship) {
        res = this.insuredRelationship.filter((ele) => ele.keyId != "4");
      }
      return res;
    },
    // 被保人与监护人关系
    bbrRelaToJhr() {
      let res = [];
      if (this.bbrRelaToTbr.length > 0) {
        res = this.bbrRelaToTbr;
      }
      if (this.bbrWithJhrShip.length > 0) {
        res = this.bbrWithJhrShip;
      }
      return res;
    },
    relaToMainBbr() {
      let res = [];
      if (this.bbrRelaToTbr.length > 0) {
        res = this.bbrRelaToTbr;
      }
      if (this.bbrToMainBbr.length > 0) {
        res = this.bbrToMainBbr;
      }
      return res;
    },
    bbrListNum() {
      return this.bbrMultList.length;
    },
    infoReg() {
      return JSON.parse(JSON.stringify(this.inputReg.insured));
    },
    filterProvince() {
      if (this.provinceFilter) {
        return this.provinceNo;
      }
      return "";
    },
    showJhr() {
      let res = false;
      if (
        this.infoReg.guardianName != void 0 &&
        this.userInfo.idNum !== "" &&
        this.ageVal !== "" &&
        this.ageVal < this.minorAge
      ) {
        res = true;
      }
      return res;
    },
    jianhuIsAppnt() {
      return this.userInfo.guardianName === this.applicant.name;
    },
    needSmsCheck() {
      let res = false;
      if (
        this.infoReg.hasOwnProperty("validCode") &&
        this.userInfo.age >= 18 &&
        this.userInfo.relationToAppnt != "4"
      ) {
        res = true;
        if (this.mainRiskCode == "110194") {
          res = this.pindex == 0;
        }
        if (this.mainRiskCode == "110191") {
          if (["3", "4", "7", "8"].includes(this.mainInsu[0].planCode)) {
            res = true;
          } else {
            res = false;
          }
        }
      }
      return res;
    },
  },
  watch: {
    userInfo: {
      handler: function (val) {
        if (this.pageLoad) {
          this.$store.commit("insert/UPDATE_MULT_BBR", {
            index: this.pindex,
            data: val,
          });
        }
      },
      deep: true,
    },
    /**本人，实时更新被保人信息*/
    appnt: {
      handler: function (val) {
        if (this.userInfo.relationToAppnt == "4" && this.pageLoad && val) {
          this.changeData(val);
        }
      },
      deep: true,
    },
    showJhr: {
      handler: function (val) {
        if (!val) {
          this.changeData({ guardianName: "", guardianIdNo: "" });
        }
      },
    },
  },
  data() {
    return {
      userType: "被保险人",
      userFlag: `bbr${this.pindex + 1}`,
      enfold: true,
      noticePop: false,
    };
  },
  mixins: [
    userInfoMix,
    radioMixin,
    popupMixin,
    tbrBbrMixin,
    bbrAndSyrInfoMix,
    smsCodeMixin,
  ],
  created() {
    // 防止回显传入受益人相关字段
    const bbtItem = this.bbrMultList[this.pindex];
    Object.keys(this.userInfo).map((key) => {
      if (bbtItem.hasOwnProperty(key)) {
        this.userInfo[key] = bbtItem[key];
      }
    });
    // Object.assign(this.userInfo, this.bbrMultList[this.pindex]);
    this.initDefaultData();
    this.$nextTick(() => {
      this.pageLoad = true;
    });
    this.enfold = this.userInfo.relationToAppnt != "4";
  },
  mounted() {
    if (this.pindex == 0) {
      let obj = {};
      // 主被保人
      obj.relationToMain = "4";
      obj.relationToMainName = "本人";
      this.$store.commit("insert/UPDATE_MULT_BBR", {
        index: 0,
        data: obj,
      });
    }
    // 投被保关系
    if (
      this.infoReg.hasOwnProperty("relationToAppnt") &&
      this.bbrRelaToTbr.length == 1
    ) {
      this.changeData({
        relationToAppnt: this.bbrRelaToTbr[0].keyId,
        relationToAppntName: this.bbrRelaToTbr[0].text,
      });
    }
  },
  methods: {
    async saveForm() {
      let label = "被保人";
      if (this.bbrMultList.length > 1) {
        label = `被保人${this.pindex + 1}`;
      }
      if (this.pindex == 0) {
        this.changeData({
          relationToMain: "4",
          relationToMainName: "本人",
        });
      }
      // 校验+提交
      let bbrItem = JSON.parse(JSON.stringify(this.userInfo));
      // 非当前变量赋值
      const store_val = JSON.parse(
        JSON.stringify(this.bbrMultList[this.pindex])
      );
      bbrItem.bnfCategory = store_val.bnfCategory;
      bbrItem.bnfs = store_val.bnfs;
      if (bbrItem.relationToAppnt == "4") {
        const tbrInfo = JSON.parse(JSON.stringify(this.appnt));
        Object.keys(tbrInfo).map((key) => {
          if (bbrItem.hasOwnProperty(key)) {
            bbrItem[key] = tbrInfo[key];
          }
        });
        bbrItem.relationToAppnt = "4";
        bbrItem.relationToAppntName = "本人";
        this.$store.commit("insert/UPDATE_MULT_BBR", {
          index: this.pindex,
          data: bbrItem,
        });
      }
      // return console.log('被保人校验');
      const iptCfg = JSON.parse(JSON.stringify(this.infoReg));
      let res = validUserInfo(iptCfg, bbrItem, label);
      if (!res.status) {
        let target = document.querySelector(`.bbr${this.pindex}_${res.target}`);
        this.tipsInfo[res.target] = res.msg;
        if (res?.targetUser == "tbr") {
          target = document.querySelector(`.refmaritalStatus`);
          this.tipsInfo[res.target] = "";
        }
        if (target) {
          target.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
        this.$store.commit("common/SET_FIELD_MEAN_CONT", {
          label: `${label}规则校验`,
          desc: `${res.msg}`,
        });
        return { status: false };
      }
      /**客户关联险种校验*/
      res = userRelateRisk(this.mainInsu[0], bbrItem.bnfCategory);
      if (!res.status) {
        this.$store.commit("common/SET_FIELD_MEAN_CONT", {
          label: `${label}规则校验`,
          desc: `${res.msg}`,
        });
        return { status: false };
      }
      /**验证码校验*/
      if (res.status && this.needSmsCheck && bbrItem.relationToAppnt != "4") {
        res = await this.checkSmsCode();
        if (res.status) {
          this.$store.dispatch(
            "common/checkedSmsPhone",
            `${this.userInfo.phone}${this.userInfo.validCode}${this.userFlag}`
          );
        }
      }
      /* === 受益人校验 === */
      if (res.status && this.syrMinNum > 0) {
        let flag3 = this.$refs[`benefit${this.pindex}Ref`].saveForm();
        if (!flag3.status) return { status: false };
        res = flag3;
      }
      /* === 受益人校验 === */
      return res;
    },
    delUserItem() {
      this.$baseConfirm("是否要删除该被保人?", () => {
        this.$store.dispatch("insert/delBbrItem", this.pindex);
        this.$store.commit("updateLoad", true);
        this.$store.commit("common/SET_BBR_REFRESH", false);
        setTimeout(() => {
          this.$store.commit("common/SET_BBR_REFRESH", true);
          this.$store.commit("updateLoad", false);
        }, 30);
      });
    },
    changeSameTbr(type, item) {
      if (this.bbrRelaToTbr.length <= 1) return;
      const demo = JSON.parse(JSON.stringify(this.infoReg));
      const data = JSON.parse(JSON.stringify(this.userInfo));
      let obj = Object.assign({}, demo);
      if (item.value == "1") {
        const tbrInfo = JSON.parse(JSON.stringify(this.appnt));
        Object.keys(tbrInfo).map((key) => {
          if (obj.hasOwnProperty(key)) {
            obj[key] = tbrInfo[key];
          }
        });
        obj.relationToAppnt = "4";
        obj.relationToAppntName = "本人";
      } else {
        obj.relationToAppnt = "";
        obj.relationToAppntName = "";
        obj.idType = "0";
        obj.idName = "身份证";
      }
      obj.risks = data.risks || [];
      this.enfold = obj.relationToAppnt != "4";
      // console.log(obj);
      this.changeData(obj);
    },
    openHealthPop() {
      if (this.noticeMode == "1") return;
      this.noticePop = true;
      let label = "被保险人";
      if (this.bbrMultList.length > 1) {
        label = `被保险人${this.pindex + 1}`;
      }
      this.$nextTick(() => {
        this.$refs.healthyRef.initModal(`${label}`, this.userInfo);
      });
    },
    sureClick(value) {
      this.changeData({ healthyStatus: value }, "0");
      this.noticePop = false;
    },
  },
};
</script>
<style lang="less" scoped>
@import "../style.less";
.first_margin {
  margin-top: -30px;
}
</style>
